<template>
  <div>
    <el-form :inline="true" :model="drug" class="demo-form-inline">
      <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="请输入药品名" v-model="drug.name"></el-input>
      <el-form-item>
        <el-button type="primary" @click="getDrug">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="showAddView()">添加药品</el-button>
      </el-form-item><br>
    </el-form>

    <el-table
        :data="drugs"
        stripe
        style="width: 100%">
      <el-table-column
          prop="id"
          fixed="left"
          label="药品id"
          width="100">
      </el-table-column>
      <el-table-column
          prop="name"
          fixed="left"
          label="药品名"
          width="200">
      </el-table-column>
      <el-table-column
          prop="type"
          label="类型"
          width="200">
      </el-table-column>
      <el-table-column
          prop="efficacy"
          label="功效"
          width="200">
      </el-table-column>
      <el-table-column
          prop="producers"
          label="生产商"
          width="200">
      </el-table-column>
      <el-table-column
          prop="price"
          label="单价"
          width="200">
      </el-table-column>
      <el-table-column
          prop="specification"
          label="规范"
          width="200">
      </el-table-column>
      <el-table-column
          prop="unit"
          label="单位"
          width="200">
      </el-table-column>
      <el-table-column
          prop="wholesalePrice"
          label="批发价(元)"
          width="200">
      </el-table-column>
      <el-table-column
          prop="storageQuantity"
          label="库存量"
          width="200">
      </el-table-column>
      <el-table-column
          prop="productionDate"
          label="生产日期"
          width="200">
      </el-table-column>
      <el-table-column
          prop="expirationDate"
          label="保质期"
          width="200">
      </el-table-column>
      <el-table-column
          prop="createDate"
          label="创建日期"
          width="200">
      </el-table-column>
      <el-table-column
          prop="createNameid"
          label="创建人id"
          width="100">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="150">
        <template slot-scope="scope">
          <el-button @click="showEditView(scope.$index, scope.row)" size="small" class="el-button--default" type="success">编辑</el-button>
          <el-button type="danger" size="small" class="el-button--danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="更新药品" :visible.sync="dialogFormVisible">
      <el-form :model="updateDrug">
        <el-form-item label="药品名" :label-width="formLabelWidth" >
          <el-input v-model="updateDrug.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth" >
          <el-input v-model="updateDrug.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="功效" :label-width="formLabelWidth" >
          <el-input v-model="updateDrug.efficacy" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="生产商" :label-width="formLabelWidth" >
          <el-input v-model="updateDrug.producers" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单价" :label-width="formLabelWidth" >
          <el-input v-model="updateDrug.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="规范" :label-width="formLabelWidth" >
          <el-input v-model="updateDrug.specification" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth" prop="unit">
          <el-input v-model="updateDrug.unit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="批发价" :label-width="formLabelWidth">
          <el-input v-model="updateDrug.wholesalePrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存量" :label-width="formLabelWidth">
          <el-input v-model="updateDrug.storageQuantity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="生产日期" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker
                v-model="updateDrug.productionDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="保质期" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker
                v-model="updateDrug.expirationDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doUpdateDrug">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加药品" :visible.sync="dialogFormVisible2">
      <el-form :model="addDrug">
        <el-form-item label="药品名" :label-width="formLabelWidth" >
          <el-input v-model="addDrug.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth" >
          <el-input v-model="addDrug.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="功效" :label-width="formLabelWidth" >
          <el-input v-model="addDrug.efficacy" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="生产商" :label-width="formLabelWidth" >
          <el-input v-model="addDrug.producers" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单价" :label-width="formLabelWidth" >
          <el-input v-model="addDrug.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="规范" :label-width="formLabelWidth" >
          <el-input v-model="addDrug.specification" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth" prop="unit">
          <el-input v-model="addDrug.unit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="批发价" :label-width="formLabelWidth">
          <el-input v-model="addDrug.wholesalePrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存量" :label-width="formLabelWidth">
          <el-input v-model="addDrug.storageQuantity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="生产日期" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker
                v-model="addDrug.productionDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="保质期" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker
                v-model="addDrug.expirationDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="doAddDrug">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Drugs",
  data(){
    return{
      drugs:[],
      drug: {
        name:''
      },
      dialogFormVisible:false,
      updateDrug:{
        name:'',
        type:'',
        efficacy:'',
        producers:'',
        price:'',
        specification:'',
        unit:'',
        wholesalePrice:'',
        storageQuantity:'',
        productionDate:'',
        expirationDate:'',

      },
      formLabelWidth:'100px',
      dialogFormVisible2:false,
      addDrug:{
        name:'',
        type:'',
        efficacy:'',
        producers:'',
        price:'',
        specification:'',
        unit:'',
        wholesalePrice:'',
        storageQuantity:'',
        productionDate:'',
        expirationDate:'',
      }
    }
  },
  mounted() {
    this.initDrugs();
  },
  methods:{
    //显示药品编辑框
    showEditView(index,data){
      this.dialogFormVisible=true;
      this.updateDrug=data;
    },
    //显示添加编辑框
    showAddView(index,data){
      this.dialogFormVisible2=true;
    },
    //删除药品
    handleDelete(index,data){
      this.$confirm('此操作将永久删除该药品信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/drug/deleteDrug/'+data.id).then(resp=>{
          if(resp){
            this.initDrugs();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //获取所有药品
    initDrugs(){
      this.getRequest("/drug/getAllDrugs").then(resp=>{
        if(resp){
          this.drugs=resp;
        }
      })
    },
    //查询药品
    getDrug(){},
    //更新药品
    doUpdateDrug(){
      this.putRequest("/drug/updateDrug",this.updateDrug).then(resp=>{
        if(resp){
          this.initDrugs();
          this.dialogFormVisible=false;

        }
      })
    },
    //添加药品
    doAddDrug(){
      this.postRequest("/drug/addDrug",this.addDrug).then(resp=>{
        if(resp){
          this.initDrugs();
          this.addDrug="";
          this.dialogFormVisible2=false;
        }
      })
    }
  }
}
</script>

<style scoped>

</style>